<template>
  <div>
    <div class="card-box">
      <div class="title">打印机通用设置</div>
      <div class="check-box">
        <div v-for="(item, index) in checkList" :key="index" class="check-item" @click="handleClick(index)">
          <img v-if="selectActiveIndex === index" class="img" :src="item.checkImg" alt="" />
          <img v-else class="img" :src="item.notCheckImg" alt="" />
          <span class="name">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { updateShopSetting, shopSettingDetail } from '@/api/computer'
import { throttle } from '@/utils/toolsValidate'
import noCheckImg from "@/assets/images/components/not-check.png";
import isCheckImg from "@/assets/images/components/ischecked.png";

const checkList = reactive([
  { notCheckImg: noCheckImg, checkImg: isCheckImg, name: '非本机操作不出单', status: 0 },
  { notCheckImg: noCheckImg, checkImg: isCheckImg, name: '执行操作设备不出单，对应区域出单', status: 1 },
  { notCheckImg: noCheckImg, checkImg: isCheckImg, name: '执行操作设备与对应区域都出单', status: 2 },
  { notCheckImg: noCheckImg, checkImg: isCheckImg, name: '执行操作设备与对应区域都不出单', status: 3 }
])

const selectActiveIndex = ref(-1)

onMounted(() => {
  shopSettingDetail().then(res => {
    if (res.status === 200) {
      console.log('打印状态：》》',res.data.printer_status)
      selectActiveIndex.value = res.data.printer_status
    }
  })
})

const handleClick = throttle(function (index) {
  selectActiveIndex.value = index
  updateShopSetting({ printer_status: index }).then(res => {
    if (res.status === 200) {
      ElMessage.success('设置成功')
    }
  })
}, 3000)
</script>

<style lang="scss" scoped>
.card-box { width: 420px; height: 960px; background: #ffffff; border-radius: 20px; box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16); box-sizing: border-box; }
.card-box .title { width: 420px; height: 88px; background: #f4f4f4; border-radius: 20px 20px 0px 0px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-family: PingFang SC, PingFang SC-Bold; font-weight: 700; color: #333333; }
.card-box .check-box { padding-top: 40px; padding-left: 30px; display: flex; flex-direction: column; }
.card-box .check-box .check-item { margin-bottom: 28px; display: flex; align-items: center; cursor: pointer; }
.card-box .check-box .check-item .img { margin-right: 12px; width: 20px; height: 20px; cursor: pointer; }
.card-box .check-box .check-item .name { font-size: 16px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; }
</style>
